import { Button } from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';

import { TableListItem } from './data.d';
import { GetList } from '../../services/crud';

const TableList: React.FC<{}> = () => {
  const [] = useState<boolean>(false);
  const [] = useState<boolean>(false);
  const [] = useState({});
  const actionRef = useRef<ActionType>();
  const [selectedRowsState, setSelectedRows] = useState<TableListItem[]>([]);
  const columns: ProColumns<TableListItem>[] = [
    {
      title: '订单编号',
      dataIndex: 'orderNo',
    },
    {
      title: '交易数量',
      dataIndex: 'tradeQty',
      hideInSearch: true,
    },
    {
      title: '交易金额',
      dataIndex: 'tradeAmt',
      sorter: true,
      hideInSearch: true,
      renderText: (val: string) => `￥ ${val} `,
    },
    {
      title: '佣金1',
      dataIndex: 'commission1',
      sorter: true,
      hideInSearch: true,
      renderText: (val: string) => `￥ ${val} `,
    },
    {
      title: '佣金2',
      dataIndex: 'commission2',
      sorter: true,
      hideInSearch: true,
      renderText: (val: string) => `￥ ${val} `,
    },
    {
      title: '佣金3',
      dataIndex: 'commission3',
      sorter: true,
      hideInSearch: true,
      renderText: (val: string) => `￥ ${val} `,
    },
    {
      title: '交易类型',
      dataIndex: 'tradeType',
      valueEnum: {
        'trade': { text: '正常' },
        'recharge': { text: '充值' },
        'refund': { text: '退款' },
      },
    },
    {
      title: '交易时间',
      dataIndex: 'dateRange',
      hideInTable: true,
      valueType: 'dateRange',
    },
    {
      title: '交易时间',
      dataIndex: 'creationTime',
      sorter: true,
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '用户',
      dataIndex: 'nickname',
      renderText: (_, record: any) => `${record.tMember.nickname}`,
      hideInSearch: true,
      
    },
    {
      title: '用户手机号',
      dataIndex: 'mobile',
      renderText: (_, record: any) => `${record.tMember.mobile}`,

    },
    // {
    //   title: '提现状态',
    //   dataIndex: 'isCashOut',
    //   hideInSearch: true,
    //   renderText: (val: boolean) => `${val?'已提现':'未提现'} `,
    // },
  ];

  return (
    <PageContainer>
      <ProTable<TableListItem>
        headerTitle="交易记录"
        actionRef={actionRef}
        rowKey="id"
        request={(params: any, sort: any, filter: any) => GetList({
          skipCount: (params.current - 1) * params.pageSize,
          maxResultCount: params.pageSize,
          keywords: params.orderNo,
          tradeType: params.tradeType,
          dateRange: params.dateRange?.join(','),
          mobile: params.mobile
        }, 'Edu_Trade').then((resp) => {
          return {
            data: resp.result.items,
            total: resp.result.totalCount,
            success: resp.success
          };
        })}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
        }}
      />
      {selectedRowsState?.length > 0 && (
        <FooterToolbar
          extra={
            <div>
              已选择 <a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a> 项&nbsp;&nbsp;
              <span>
                金额总计 {selectedRowsState.reduce((pre, item) => pre + item.tradeAmt, 0)} 元
              </span>
            </div>
          }
        >
          <Button type="primary">批量审批</Button>
        </FooterToolbar>
      )}

    </PageContainer>
  );
};

export default TableList;
